import {Tabs,message } from 'antd'
import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, Link } from 'umi'
import { querySalaryInfo,updateSalaryInfo } from '../service'
import CreateForm from './components/CreateForm'
import moment from 'moment';
import { formatNumber } from '@/utils/utils'

const TableList = () => {
  const actionRef = useRef()
  const actionRef2 = useRef()
  const [done, setDone] = useState(false)
  const [visible, setVisible] = useState(false)
  const [current, setCurrent] = useState(undefined)
  const [tabIndex, setTabIndex] = useState("0")
  const  { TabPane } = Tabs;
  const notColumns = [
    {
      title: '员工id',
      dataIndex: 'oid',
      hideInSearch: true,
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '公司名称',
      dataIndex: 'orgname',

    },
    {
      title: '部门名称',
      dataIndex: 'unitname',
    },
    {
      title: '岗位名称',
      dataIndex: 'jobname',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          <a onClick={() => employ(record)}>分配</a>
        </>
      ),
    }
  ]
  const alreadyColumns = [
    {
      title: '关键字搜索',
      dataIndex: 'keyword',
      hideInTable: true,
    },
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '工号',
      dataIndex: 'oid',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '公司名称',
      dataIndex: 'orgname',
      hideInSearch: true,

    },
    {
      title: '部门名称',
      dataIndex: 'unitname',
      hideInSearch: true,
    },
    {
      title: '岗位名称',
      dataIndex: 'jobname',
      hideInSearch: true,
    },
    {
      title: '分配日期',
      dataIndex: 'regularDay',
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
      hideInSearch: true,
    },
    {
      title: '转正后基本工资',
      dataIndex: 'monthlySalary',
      render:(val) =>{
        return formatNumber(val);
      },
      hideInSearch: true,
    },
    {
      title: '转正后模块工资',
      dataIndex: 'performance',
      render:(val) =>{
        return formatNumber(val);
      },
      hideInSearch: true,
    },
    {
      title: '备注',
      dataIndex: 'salaryRemark',
      hideInSearch: true,
    },
  ]

  const handleCancel = () => {
    setCurrent(null);
    setVisible(false)
  }

  const employ = (item) => {
    setCurrent(item)
    setVisible(true)
  }

  const handleSubmit = (values) => {
    updateSalaryInfo(values).then((res)=>{
      setDone(false)
      setCurrent(null)
      setVisible(false)
      message.success('薪酬分配成功！');
      actionRef.current.reload()
    })
  }


  const callback = (key) => {
    setTabIndex(key)
    if(key === '0'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  }

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={callback}>
        <TabPane tab="待分配" key="0">
          <ProTable
            actionRef={actionRef}
            rowKey="oid"
            request={(params) => querySalaryInfo(params,tabIndex)}
            columns={notColumns}
          />
          <CreateForm
            values={{}}
            done={done}
            current={current}
            visible={visible}
            onCancel={handleCancel}
            onSubmit={handleSubmit}
          />
        </TabPane>
        <TabPane tab="已分配" key="1">
          <ProTable
            actionRef={actionRef2}
            rowKey="oid"
            request={(params) => querySalaryInfo(params,tabIndex)}
            columns={alreadyColumns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
}

export default connect(() => ({
}))(TableList)
